<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <template>
        <el-container>
            <el-main>
                <el-form inline size="mini" label-width="80px" v-model="queryForm">
                    <el-form-item label="用户名">
                        <el-input v-model="queryForm.realName" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-select clearable v-model="queryForm.roleId" placeholder="角色">
                            <el-option v-for="item in roleList" :label="item.roleName" :value="item.id" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onQuery">查询</el-button>
                        <el-button type="primary" @click="onAdd">添加</el-button>
                    </el-form-item>
                </el-form>

                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="birthday"
                            label="生日"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="realName"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="account"
                            label="账号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="性别"
                            width="120" :formatter="(row) => row.sex==0?'男':'女'">
                    </el-table-column>
                    <el-table-column
                            prop="roleId"
                            label="角色"
                            width="120" :formatter="formatterRole">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="电话"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="onDel(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        layout="prev, pager, next"
                        @current-change="onPage"
                        :page-size="pageSize"
                        :current-page="pageNo"
                        :total="total">
                </el-pagination>
                <el-dialog :title="title" width="480px" :visible.sync="open">
                    <el-form size="mini" :model="form" label-width="80px">
                        <el-form-item label="账号">
                            <el-input v-model="form.account" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="form.realName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio v-model="form.sex" :label="0">男</el-radio>
                            <el-radio v-model="form.sex" :label="1">女</el-radio>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-date-picker
                                    v-model="form.birthday"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择生日">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model="form.address" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="form.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-select clearable v-model="form.roleId" placeholder="请选择角色">
                                <el-option label="管理员" :value="1"></el-option>
                                <el-option label="经理" :value="2"></el-option>
                                <el-option label="用户" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="mini" @click="open = false">取 消</el-button>
                        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
                    </div>
                </el-dialog>
            </el-main>
            <el-aside width="200px">Aside
                <el-table
                        :data="scoreList"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="value.realName"
                            label="姓名">
                    </el-table-column>
                    <el-table-column
                            prop="score"
                            label="点击数量">
                    </el-table-column>
                </el-table>
            </el-aside>
        </el-container>

    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
                open: false,
                queryForm: {},
                form: {
                    sex: '0'
                },
                title: '',
                total: 0,
                pageSize: 2,
                pageNo: 1,
                roleList: [],
                scoreList: [],
            }
        },
        created() {
            this.list();
            $.getJSON('http://localhost:8080/roles', result => {
                this.roleList = result;
            })
        },
        methods: {
            list() {
                let data = this.queryForm;
                data.pageNo = this.pageNo;
                data.pageSize = this.pageSize;
                $.ajax({
                    url: 'http://localhost:8080/users',
                    data:data,
                    dataType: 'json',
                    success: (result) => {
                        this.tableData = result.records;
                        this.total = result.total;
                    }
                });
                $.ajax({
                    url: 'http://localhost:8080/scores?range=3',
                    dataType: 'json',
                    success: (result) => {
                        this.scoreList = result;
                    }
                })
            },
            onDel(row) {
                this.$confirm('确定删除吗？', '提示', {type: 'warning'}).then(() => {
                    $.ajax({
                        url: 'http://localhost:8080/users/del?id=' + row.id,
                        dataType: 'json',
                        method: 'delete',
                        success: (result) => {
                            this.$message.success(result ? '删除成功' : '删除失败');
                            this.list();
                        }
                    })
                })
            },
            async onEdit(row) {
                this.open = true;
                this.title = '修改用户';
                await $.ajax({
                    url: 'http://localhost:8080/users/update/' + row.id,
                    dataType: 'json',
                    success: (result) => {
                        this.form = result;
                    }
                });
                await $.ajax({
                    url: 'http://localhost:8080/scores?range=3',
                    dataType: 'json',
                    success: (result) => {
                        this.scoreList = result;
                    }
                });
            },
            submitForm() {
                if (this.form.id) {
                    $.ajax({
                        url: 'http://localhost:8080/users/update',
                        data: JSON.stringify(this.form),
                        contentType: 'application/json',
                        method: 'put',
                        dataType: 'json',
                        success: (result) => {
                            this.$message.success(result ? '修改成功' : '修改失败');
                            this.open = false;
                            this.list();
                        }
                    })
                } else {
                    $.ajax({
                        url: 'http://localhost:8080/users/add',
                        contentType: 'application/json',
                        data: JSON.stringify(this.form),
                        method: 'post',
                        dataType: 'json',
                        success: (result) => {
                            this.$message.success(result ? '添加成功' : '添加失败');
                            this.open = false;
                            this.list();
                        }
                    })
                }

            },
            onAdd() {
                this.open = true;
                this.title = '添加用户';
                this.form = {sex: 1}
            },
            formatterRole(row) {
                switch (row.roleId) {
                    case 1: return '管理员';
                    case 2: return '经理';
                    case 3: return '用户';
                }
                return '未知';
            },
            onPage(pageNo) {
                this.pageNo = pageNo;
                this.list();
            },
            onQuery() {
                this.pageNo = 1;
                this.list();
            }
        }
    })
</script>
</html>